<template>
  <div>
  <SplitPanel>
    <template #left-content>
      <DeptTree @select="onTreeSelect" @init="onDeptTreeInitData" />
    </template>
    <template #right-content>
      <DynamicTable
        header-title="用户管理"
        show-index
        title-tooltip="请不要随意删除用户，避免到影响其他用户的使用。"
        :data-request="loadTableData"
        :columns="columns"
        :scroll="{ x: 2000 }"
        :row-selection="rowSelection"
      >
        <template v-if="isCheckRows" #title>
          <Alert class="w-full" type="info" show-icon>
            <template #message>
              已选 {{ isCheckRows }} 项
              <a-button type="link" @click="rowSelection.selectedRowKeys = []">取消选择</a-button>
            </template>
          </Alert>
        </template>
      </DynamicTable>
    </template>
  </SplitPanel>
    <a-modal style="z-index: 10000" width="1000px" v-model:open="visible" title="绑定事件" @ok="handleOk">
      <TransferData :userObj="userObj"/>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
  import { ref, computed } from 'vue';
  import { Modal, Alert } from 'ant-design-vue';
  import { baseColumns, type TableListItem, type TableColumnItem } from './columns';
  import DeptTree from './DeptTree.vue';
  import TransferData from './transferData.vue';
  import type { LoadDataParams } from '@/components/core/dynamic-table';
  import { SplitPanel } from '@/components/basic/split-panel';
  import { useTable } from '@/components/core/dynamic-table';
  import Api from '@/api/';

  defineOptions({
    name: 'SystemUser',
  });

  const [DynamicTable, dynamicTableInstance] = useTable({ formProps: { autoSubmitOnEnter: true } });

  const selectedDeptId = ref<number>();
  const deptTree = ref<any[]>([]);
  const userObj = ref<TableListItem>();

  const rowSelection = ref({
    selectedRowKeys: [] as number[],
    onChange: (selectedRowKeys: number[], selectedRows: TableListItem[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      rowSelection.value.selectedRowKeys = selectedRowKeys;
    },
  });

  // 是否勾选了表格行
  const isCheckRows = computed(() => rowSelection.value.selectedRowKeys.length);

  const loadTableData = async (params: LoadDataParams) => {
    const data = await Api.systemUser.userList({
      ...params,
      deptId: selectedDeptId.value,
    });
    rowSelection.value.selectedRowKeys = [];
    return data;
  };

  const onTreeSelect = (id: number) => {
    selectedDeptId.value = id;
    dynamicTableInstance?.reload();
  };
  const onDeptTreeInitData = (treeData) => {
    deptTree.value = treeData;
  };

  const columns: TableColumnItem[] = [
    ...baseColumns,
    {
      title: '操作',
      width: 100,
      dataIndex: 'ACTION',
      fixed: 'right',
      actions: ({ record }) => [
        {
          label: "绑定事件",
          icon: 'ant-design:edit-outlined',
          tooltip: '编辑用户资料',
          auth: {
            perm: 'system:user:update',
            effect: 'disable',
          },
          onClick: () => {
            userObj.value = record
            showModal()
            return true;
          },
        },
      ],
    },
  ];

  const visible = ref<boolean>(false);
  const showModal = () => {
    visible.value = true;
  };
  const handleOk = (e: MouseEvent) => {
    console.log(e);
    visible.value = false;
  };

</script>

<style></style>
